<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
    <title>后台登录</title>
    <link href="__CSS__/bootstrap.css" rel="stylesheet">
    <link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__CSS__/style.min.css" rel="stylesheet">
    <link href="__CSS__/login.min.css" rel="stylesheet">
    <!--极验验证需要引入的两个JS-->
    <!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
    <script src="http://static.geetest.com/static/tools/gt.js"></script>

    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
</head>

<body class="signin">
<div class="signinpanel">
    <div class="row" >
        <div class="col-sm-7" style="color:#fff;">
            <div class="signin-info" >
                <div class="logopanel m-b" >
                </div>
                <div class="m-b" ></div>
                <h2>欢迎使用后台管理系统</h2>
                <ul class="m-b">
                </ul>
            </div>
        </div>
        <div class="col-sm-6" style="color:#fff;height:265px;float:left;text-align: center; line-height:290px;">
            <!--<img src="/static/admin/images/超人.png" alt="" width="50%" height="70%">-->
        </div>
        <div class="col-sm-5" style="color:#fff;float:right">
            <form id="doLogin" name="doLogin" method="post" action="{:url('doLogin')}">
                <p class="m-b-md" style="text-align:center;font-size:15px;">登录到后台管理</p>
                <p id="err_msg" style="color:#ec4758;margin-left:11px;"></p>
                <input type="text" class="form-control uname" placeholder="请输入帐号" id="username" name="username" autocomplete="off" style="height:36px;border-radius: 2px;"/>
                <input type="password" class="form-control pword m-b" placeholder="请输入密码" id="password" name="password" autocomplete="off" style="height:36px;border-radius: 2px;"/>
                {if condition="config('verify_type') eq 1"}
                    <div style="margin-bottom:70px">
                        <input type="text" class="form-control" placeholder="请输入验证码" style="height:36px;border-radius: 2px;color:black;width:170px;float:left;margin:0px 0px;" name="code" id="code" autocomplete="off"/>
                        <img src="{:url('checkVerify')}" onclick="javascript:this.src='{:url('checkVerify')}?tm='+Math.random();" style="float:right;cursor: pointer" id="verify"/>
                    </div>
                {elseif condition="config('verify_type') eq 2"/}
                    <div id="geeFa" style="width:200px;">
                        <div id="embed-captcha"></div>
                    </div>
                    <p id="wait">正在加载验证码......</p>
                {/if}
                <button type="submit" class="btn btn-primary btn-block" style="outline:none;" >登　录</button>
            </form>
        </div>
    </div>
    <div class="signup-footer">
        <div class="pull-left" style="color:#fff">
            &copy; 2016 All Rights Reserved.
        </div>
    </div>
</div>
<script src="__JS__/plugins/layui/layui.js"></script>
<script src="__JS__/jquery.min.js?v=2.1.4"></script>
<script src="__JS__/bootstrap.js?v=3.3.6"></script>
<script src="__JS__/jquery.form.js"></script>
<script src="__JS__/wk.js"></script>
<script>
    layui.config({
        base: '/src/' //静态资源所在路径
    }).extend({
        index: 'index', //主入口模块
    }).use(['index']),function(){};
</script>
 <script>
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    var geeCheck = function(){
        $.ajax({
            // 获取id，challenge，success（是否启用failback）
            url: "{:url('getVerify',array('t'=>time()))}", // 加随机数防止缓存
            type: "get",
            dataType: "json",
            success: function (data) {
                // 使用initGeetest接口
                // 参数1：配置参数
                // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                    offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                    width:'300px',
                }, handlerEmbed);
            }
        });
    }
    if('{:config('verify_type')}' == 2){
        geeCheck();
    }

$(function(){
    $('#username').focus();
    $('#doLogin').ajaxForm({
        beforeSubmit: checkForm, // 此方法主要是提交前执行的方法，根据需要设置
        success: complete, // 这是提交后的方法
        dataType: 'json',
        error:function(event, xhr, options, exc){
            switch (event.status) {
                case 403:
                    wk.error('403:禁止访问...');
                    break;
                case 404:
                    wk.error('404:请求服务器出错...');
                    break;
                case 500:
                    wk.error('500:服务器错误...');
                    break;
            }
            $(".btn").removeClass('btn-danger').removeClass('disabled').addClass('btn-primary').text("登　录");
        }
    });

    function checkForm(){
        if( '' == $.trim($('#username').val())){
            // wk.error('请输入登录帐号');
            layer.msg('请输入登录帐号',{icon:2,time:1500,anim: 6});
            $('#username').focus();
            return false;
        }

        if( '' == $.trim($('#password').val())){
            // wk.error('请输入登录密码');
            layer.msg('请输入登录密码',{icon:2,time:1500,anim: 6});
            $('#password').focus();
            return false;
        }

        $(".btn").addClass('disabled').html('登录中... &nbsp;&nbsp;&nbsp;<i class="fa fa-spinner fa-pulse"></i>');
        // $("button").text("登录中...");
    }


    function complete(data){
        if(data.code==1){
            setTimeout(function(){
                window.location.href=data.url;
            },1500);
        }else{
            // wk.error(data.msg);
            layer.msg(data.msg,{icon:2,time:1500,anim: 6});
            // $('#err_msg').html('<i class="fa fa-warning"></i> '+data.msg);
            if(data.status == 100){
                setTimeout(function(){
                    if('{:config('verify_type')}' == 2){
                        $("#wait").removeClass('hide');
                        $('#embed-captcha').remove();
                        $('#geeFa').append('<div id="embed-captcha"></div>')
                        geeCheck();
                    }else if('{:config('verify_type')}' == 1){
                        $('#verify').attr("src","{:url('checkVerify')}?tm="+Math.random());
                    }
                },2000)
            }
            $(".btn").removeClass('btn-danger').removeClass('disabled').addClass('btn-primary').text("登　录");
            return false;
        }
    }

});

    //防止页面后退
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
    });

</script>
</body>
</html>